<template>
  <div
    class="relative min-h-screen flex flex-col items-center justify-start bg-no-repeat bg-center bg-cover py-[40px] px-[60px] box-border"
    :style="{ backgroundImage: `url(${bgImage})` }"
  >
    <div class="absolute top-[40px] right-[60px]">
      <el-dropdown trigger="click" @command="handleCommand">
        <div
          class="inline-flex items-center gap-[6px] py-2 px-3 rounded-full bg-white/85 text-[#2d5baf] text-sm cursor-pointer transition-shadow hover:shadow-[0_6px_16px_rgba(54,125,232,0.25)]"
        >
          <span>{{ displayName }}</span>
          <el-icon class="text-[16px]"><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item disabled>{{ displayName }}</el-dropdown-item>
            <el-dropdown-item command="system">系统配置</el-dropdown-item>
            <el-dropdown-item command="basic">基础信息</el-dropdown-item>
            <el-dropdown-item command="screen">动态数据</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <main>
      <h1 class="mb-[10vh] text-5xl font-700 tracking-[2px] text-[#1f4a89] text-center">动态风险超前预警平台</h1>
      <div class="grid grid-cols-3 gap-15 w-[min(1120px,100%)]">
        <div
          v-for="card in cards"
          :key="card.key"
          class="relative min-h-[360px] p-[48px_24px_32px] lg:p-[60px_32px_40px] flex flex-col items-center justify-between text-center bg-no-repeat bg-cover rounded shadow-[0_25px_40px_rgba(45,91,175,0.12)]"
          :style="{ backgroundImage: `url(${cardBackground})` }"
        >
          <img :src="card.image" class="w-[160px] h-[160px] object-contain" :alt="card.title" />
          <div class="text-[22px] text-[#1f2a55] font-600 mb-3">{{ card.title }}</div>
          <el-button type="primary" class="self-center w-[140px] rounded-full" @click="goToTab(card.tab)">点击进入</el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { CaretBottom } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/modules/user';
import { useAppStore } from '@/store/modules/app';
import { ElMessage } from 'element-plus';
import bgImage from '@/assets/images/bg.png';
import cardBackground from '/images/card.png';
import riskImage from '/images/fengxian.png';
import barrierImage from '/images/pingzhang.png';
import diagnoseImage from '/images/zhenduan.png';

const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const displayName = computed(() => userStore.nickname || '用户姓名');

const cards = [
  { key: 'risk', title: '安全管理指数', image: riskImage, tab: 'risk' },
  { key: 'barrier', title: '屏障完好性动态预警', image: barrierImage, tab: 'barrier' },
  { key: 'diagnose', title: '关键报警预警与诊断', image: diagnoseImage, tab: 'alarm' },
] as const;

const commandMap: Record<string, () => void | Promise<void>> = {
  system: () => {
    appStore.setCurrentSystemModule('sys_config');
    router.push('/dashboard');
  },
  basic: () => {
    appStore.setCurrentSystemModule('base_info');
    router.push('/dashboard');
  },
  screen: () => {
    appStore.setCurrentSystemModule('dynamic');
    router.push('/dashboard');
  },
  logout: async () => {
    await userStore.logout();
    router.replace('/login');
  }
};

function handleCommand(command: string) {
  commandMap[command]?.();
}

function goToTab(tab: string) {
  router.push({ path: '/data-screen', query: { tab } });
}
</script>
